<template>
  <view class="todo-container">

    <view class="todo-list">
      <view class="list-header">
        <view class="title-wrapper">
          <view class="title-bar"></view>
          <text class="list-title">待办列表</text>
        </view>
        <text class="todo-count">共 {{filteredTodoList.length}} 项待办</text>
      </view>

      <view class="list-content">
        <uni-list>
          <uni-list-item v-for="(item, index) in filteredTodoList" 
            :key="index"
            :title="item.projectName"
            :note="getTagType(item.orderStatus)" 
            showArrow
            clickable
            class="list-item"
            :rightText="getOrderTypeText(item.orderType)"
            @click.stop="handleInbound(item)"
          >
          </uni-list-item>
        </uni-list>
      </view>
    </view>
  </view>
</template>
<script>
import { listOrder,listTodo } from "@/api/mes/order"
import { getProjectAll } from "@/api/mes/project"
import { getDicts } from "@/api/system/dict/data" // 引入字典API

export default {
  data() {
    return {
      searchKeyword: '',
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectId: null,
        orderType: null,
        orderStatus: null,
        orderWholeStatus: '0',
      },
      todoList: [],
      filteredTodoList: [],
      project_list: [],
         // 字典数据
      transport_type: [],
      order_status: []
    }
  },

  onLoad() {
    this.getProjectList();
    this.getDictData(); // 获取字典数据
  },
  onShow() {
    // 如果已经加载过项目列表，直接刷新待办列表
    if (this.project_list && this.project_list.length > 0) {
      this.loadTodoList();
    } else {
      // 如果还没有加载过项目列表，先加载项目列表
      this.getProjectList();
    }
  },

  methods: {
    // 获取字典数据
    getDictData() {
      getDicts('transport_type').then(response => {
        this.transport_type = response.data;
      });
      getDicts('order_status').then(response => {
        this.order_status = response.data
      });
    },
    // 根据状态ID获取对应的标签类型
    getTagType(statusId) {
      // 状态类型映射
      
      if (!statusId) return 'default';
      
      // 先查找字典中的状态
      const statusItem = this.order_status.find(item => item.dictValue === statusId.toString());
      
      // 如果找到了状态项，返回对应的标签文本
      if (statusItem) {
        // 这里返回状态的文本标签
        return statusItem.dictLabel || 'default';
      }
      
      // 如果没找到，直接返回默认类型
      return 'default';
    },
    // 获取订单类型文本
    getOrderTypeText(orderType) {
      if (orderType === 1 || orderType === '1') {
        return '货物入库';
      } else if (orderType === 2 || orderType === '2') {
        return '货物出库';
      }else if (orderType === 3 || orderType === '3') {
        return '辅料入库';
      }else if (orderType === 4 || orderType === '4') {
        return '辅料出库';
      } else {
        return '确认事项';
      }
    },
    // 获取订单类型颜色
    getOrderTypeColor(orderType) {
      if (orderType === 1 || orderType === '1') {
        return 'linear-gradient(135deg, #2979ff, #5094ff)'; // 入库蓝色
      } else if (orderType === 2 || orderType === '2') {
        return 'linear-gradient(135deg, #19be6b, #42d392)'; // 出库绿色
      } else {
        return 'linear-gradient(135deg, #909399, #c0c4cc)'; // 未知灰色
      }
    },
    getProjectList() {
      getProjectAll().then(response => {
        this.project_list = response.rows.map(project => ({
          value: project.projectId,
          text: project.projectName,
        }));
        this.loadTodoList();
      });
    },

    loadTodoList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      
      listTodo(this.queryParams).then(response => {
          this.todoList = response.rows.map(item => {
            const project = this.project_list.find(p => p.value === item.projectId);
            return {
              ...item,
              projectName: project ? project.text : '未知项目',
            };
          });
          this.filteredTodoList = [...this.todoList];
        })
        .catch(error => {
          console.error('加载待办列表失败：', error);
          uni.showToast({
            title: '加载失败',
            icon: 'error'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    handleInbound(item) {
      if (item.orderType === 1) {
        uni.navigateTo({
          url: `/packageOrder/pages/inbound-detail-todo?id=${item.orderId}&orderType=${item.orderType}`
        });
      } else if (item.orderType === 2) {
        uni.navigateTo({
          url: `/packageOrder/pages/outbound-detail-todo?id=${item.orderId}&orderType=${item.orderType}` 
        }) 
      }else if (item.orderType === 3) {
        uni.navigateTo({
          url: `/packageMaterial/pages/auxiliary-in-todo?id=${item.orderId}&orderType=${item.orderType}`
        }) 
      }else if (item.orderType === 4) {
        uni.navigateTo({
          url: `/packageMaterial/pages/auxiliary-out-todo?id=${item.orderId}&orderType=${item.orderType}`
        }) 
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.todo-container {
  padding: 30rpx 20rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
  
  .search-bar {
    margin-bottom: 30rpx;
    :deep(.uni-searchbar) {
      padding: 0;
    }
  }
}
.list-content {
  .list-item {
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    background-color: #fff;
    position: relative; // 添加相对定位
    
    :deep(.uni-list-item__container) {
      padding: 24rpx 20rpx;
    }
    
    .status-tag {
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(135deg, #2979ff, #5094ff);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 16rpx;
      border-radius: 12rpx 0 12rpx 0;
      z-index: 1;
      box-shadow: 2rpx 2rpx 6rpx rgba(41, 121, 255, 0.2);
    }

    // 调整标题区域的左边距，避免与标签重叠
    :deep(.uni-list-item__content-title) {
      padding-left: 120rpx;
    }
  }
}

.todo-list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 0 10rpx;
    
    .title-wrapper {
      display: flex;
      align-items: center;
      
      .title-bar {
        width: 6rpx;
        height: 32rpx;
        background-color: #2979ff;
        margin-right: 16rpx;
        border-radius: 3rpx;
      }
      
      .list-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .todo-count {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .list-content {
    .list-item {
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      background-color: #fff;
      
      :deep(.uni-list-item__container) {
        padding: 24rpx 20rpx;
      }
      
      .item-tag {
        background-color: #e1f3ff;
        color: #2979ff;
        font-size: 22rpx;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        margin-right: 12rpx;
      }
    }
  }
  
  .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;
    
    .order-number {
      font-size: 24rpx;
      color: #666;
    }
    
    .action-btn {
      background-color: #2979ff;
      border: none;
      padding: 0 30rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 28rpx;
      
      .btn-text {
        font-size: 26rpx;
        font-weight: 500;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>

